import React from 'react'
import { Carousel } from 'antd';
import { bannerApi } from '../apis/userApi';
import axios from 'axios';
import './Banner.css'

export default function Banner() {
  const [banner,setBanner]=React.useState([])
  console.log("banner",banner)
    const contentStyle = {
        height: '360px',
        color: '#fff',
        lineHeight: '360px',
        textAlign: 'center',
        background: '#364d79',
      };

    React.useEffect(()=>{
      getbanner()
    },[])
    async function getbanner(){
      let res =await axios.post("http://jacklv.cn:3000/banner")
      console.log(res.data.banners)
      setBanner(res.data.banners)
      // console.log('banner',banner)
     

    }



  return (
   
    <div className='banner'>
            <Carousel autoplay>
          {banner.map(item=>{
            return  <div key={item.encodeId}>
            <h3 style={contentStyle} ><img src={item.imageUrl} alt="" /></h3>
          </div>
          })}


{/*    
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div> */}
  </Carousel>
    
    </div>
  )
}
